<template>
  <view class="container-wrap" :style="{ height: currentHeight }">
    <view class="title">
      <view @click="isFullScreenFn">往来款项</view>
      <view style="width: 180px">
        <uni-select
          v-model="selectValue"
          dataKey="name"
          dataValue="value"
          :clear="false"
          :localdata="selectList"
          @change="conditionChange"
        ></uni-select>
      </view>
    </view>
    <view v-if="['1', '2', '3'].includes(selectValue)" class="echart-wrap">
      <view class="table-box">
        <uni-table stripe emptyText="暂无数据">
          <uni-tr>
            <uni-th
              v-for="(column, index) in columns"
              :align="column.align"
              :width="column.width"
              :key="index"
              >{{ column.title }}</uni-th
            >
          </uni-tr>
          <uni-tr v-for="(data, index) in dataSource" :key="index">
            <uni-td align="center">
              <image
                v-if="current === 1 && index === 0"
                :src="rankOne"
                style="width: 20px; height: 20px"
              ></image>
              <image
                v-if="current === 1 && index === 1"
                :src="rankTwo"
                style="width: 20px; height: 20px"
              ></image>
              <image
                v-if="current === 1 && index === 2"
                :src="rankThere"
                style="width: 20px; height: 20px"
              ></image>
              <text v-if="(current === 1 && index > 2) || current > 1">{{
                (current - 1) * 5 + index + 1
              }}</text>
            </uni-td>
            <uni-td>{{ data.businessAbbreviation }}</uni-td>
            <uni-td>
              <view style="text-align: center">{{
                data.finalAccountBalance
              }}</view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <view class="pagination-box">
        <uni-pagination
          v-model="current"
          :pageSize="5"
          :total="total"
          @change="pageChange"
        />
      </view>
    </view>
    <view v-if="selectValue === '4'" class="place-wrap">
      <view class="place-wrap flex-direction">
        <img :src="placePath" alt="" style="width: 200px; height: 110px" />
        <text>正在升级中，敬请期待...</text>
      </view>
    </view>
    <uni-loading v-show="showLoading"></uni-loading>
  </view>
</template>
<script>
import config from '@/config';
import { getCurrentAccount } from '@/api/dashboard';
import { interactionTypeList } from './baseData.js';
import uniLoading from '../common/uni-loading/uni-loading';
export default {
  components: {
    uniLoading
  },
  props: {
    currentHeight: {
      type: String,
      default: '100vh'
    }
  },
  computed: {
    rankOne() {
      return config.baseImgUrl + '/rank-1.png';
    },
    rankTwo() {
      return config.baseImgUrl + '/rank-2.png';
    },
    rankThere() {
      return config.baseImgUrl + '/rank-3.png';
    },
    placePath() {
      return config.baseImgUrl + '/up-place.png';
    }
  },
  data() {
    return {
      showLoading: false,
      current: 1,
      selectValue: '1',
      selectList: interactionTypeList,
      columns: [
        {
          title: '排名',
          width: '60px',
          align: 'center'
        },
        {
          value: 'businessAbbreviation',
          title: '供应商名称'
        },
        {
          value: 'finalAccountBalance',
          width: '100px',
          align: 'center',
          title: '余额/万元'
        }
      ],
      total: 0,
      dataSource: [],
      cacheSource: []
    };
  },
  mounted() {
    this.getCurrentAccountFn();
  },
  methods: {
    pageChange(page) {
      this.current = page.current;
      this.dataSource = this.cacheSource.slice(
        (this.current - 1) * 5,
        (this.current - 1) * 5 + 5
      );
    },
    async getCurrentAccountFn() {
      this.showLoading = true;
      const data = { amountType: this.selectValue };
      const res = await getCurrentAccount(data);
      if (res.code === 0) {
        this.cacheSource = res?.data || [];
        this.total = this.cacheSource.length || 0;
        this.dataSource = this.cacheSource.slice(
          (this.current - 1) * 5,
          (this.current - 1) * 5 + 5
        );
      }
      this.showLoading = false;
    },
    conditionChange() {
      this.current = 1;
      this.dataSource = [];
      this.cacheSource = [];
      if (this.selectValue === '1') {
        this.columns[2].title = '余额/万元';
        this.columns[2].align = 'center';
      } else {
        this.columns[2].title = '账期/天';
        this.columns[2].align = 'center';
      }
      this.getCurrentAccountFn();
    },
    isFullScreenFn() {
      if (this.currentHeight === '100vh') {
        return;
      }
      this.$tab.navigateTo('/packageA/pages/dashboard/dealingPay');
    }
  }
};
</script>
<style lang="scss" scoped>
.container-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px 10px;
  background-color: #ffffff;
  border-radius: 8px;
  .title {
    display: flex;
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    padding-bottom: 11px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
  }
  .echart-wrap {
    flex: 1;
    height: 0;
    padding: 10px 0;
    .table-box {
      overflow-y: auto;
      height: calc(100% - 20px);
      image {
        position: relative;
        top: 4px;
      }
    }
    .pagination-box {
      margin-top: 10px;
    }
  }
  .place-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
  }
  .flex {
    display: flex;
  }
  .flex-direction {
    flex-direction: column;
  }
}
</style>
